<template>
  <div class="body" style="margin-bottom: 55px">
    <mt-header fixed title="个人主页"> </mt-header>
    <div class="oil" style="margin-top: 11vh">
      <mt-cell title="加油">
        <span>个人资料</span>
        <img slot="icon" src="../assets/rili_2.png" width="80" height="80" />
      </mt-cell>

      <div class="self">
        <mt-button type="danger">钱包 </mt-button>
        <span class="span">$132465</span>
        <mt-button type="danger">地址 </mt-button>
        <span class="span">中国 - 安徽</span>
      </div>

      <mt-cell title="优惠卷" value="10张"></mt-cell>
      <mt-cell title="红包" value="11张"></mt-cell>
      <!-- 
      <mt-cell title="联名信用卡" to="#" is-link value="去支付"> </mt-cell> -->
      <!-- 
      <mt-cell title="车主权益" is-link to="##">
        <span style="color: green">了解</span>
      </mt-cell> -->
      <mt-cell title="最近加油站" is-link to="http://localhost:8080/goingoil">
        <span style="color: #db261d">去查看</span>
      </mt-cell>

      <mt-cell title="限时活动" is-link to="#">
        <span style="color: green"></span>
      </mt-cell>

      <mt-cell title="在线咨询">
        <span>寻找客服</span>
      </mt-cell>
    </div>
  </div>
</template>
<script>
// import { mapState } from "vuex";
export default {
  data() {
    return {
      loc: [],
    };
  },
  computed: {
    // ...mapState(["value"]),
  },
  mounted() {
    const url = "v1/area?pid=31";
    const loc = "";
    this.axios.get(url).then((res) => {
      console.log(res);
      this.loc = res.data[0].pname;
      return loc;
    });
  },
};
</script>
<style scoped>
.mint-header {
  height: 10vh;
  background-color: #db261d;
  font-size: 1.4em;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: #db261d;
}
.mint-cell {
  border: 2px solid #db261d;
  margin: 2vw;
  background-color: #fff;
  border-radius: 15px;
}
.mint-button--danger {
  color: #fff;
  background-color: #db261d;
}
.self {
  padding: 1vh;
  background-color: #fff;
  margin: 5px;
  border-radius: 15px;
}
.self > .span {
  margin: 0 20px 0 6px;
}
</style>
